<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <!--个人信息页面-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>个人信息 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="/lib/css/bootstrap.min.css" rel="stylesheet">
<link href="/lib/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/lib/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid p-t-15">
  
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          
          <div class="edit-avatar">
            <img th:src="${user.picture}" alt="..." class="img-avatar" id="imgs">
            <div class="avatar-divider"></div>
            <div class="edit-avatar-content">
              <form name="form0" id="formimg" enctype="multipart/form-data">
                <input type="file" name="file" id="file1" multiple="multiple" /><br>
              </form>
              <p class="m-0">修改头像，选择一张你喜欢的图片，上传图片大小不能超过2M。</p>
            </div>
          </div>
          <hr>
            <div class="form-group">
              <label for="username">用户名</label>
              <input type="text" class="form-control" name="username" id="username" th:value="${user.username}" disabled="disabled" />
            </div>
            <div class="form-group">
              <label for="nickname">昵称</label>
              <input type="text" class="form-control" name="nickname" id="nickname" placeholder="输入您的昵称" th:value="${user.nickname}">
            </div>
            <div class="form-group">
              <label for="phone">电话号码</label>
              <input type="text" class="form-control" name="phone" id="phone" aria-describedby="emailHelp" placeholder="请输入正确的邮箱地址" th:value="${user.phone}">
              <small id="phoneHelp" class="form-text text-muted">请保证您填写的手机号码是正确的。</small>
            </div>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="请输入正确的邮箱地址"th:value="${user.email}">
              <small id="emailHelp" class="form-text text-muted">请保证您填写的邮箱地址是正确的。</small>
            </div>
            <div class="form-group">
              <label for="address">住址</label>
              <input type="email" class="form-control" name="address" id="address" aria-describedby="emailHelp" placeholder="请输入正确的邮箱地址"th:value="${user.address}">
              <small id="addresslHelp" class="form-text text-muted">请保证您填写的住址是正确的。</small>
            </div>
            <div class="form-group">
              <label for="sex">性别</label>
              <select id="sex" th:value="${user.sex}">
                <option value="1">男</option>
                <option value="2">女</option>
              </select>
            </div>
            <div class="form-group">
              <label for="birthday">生日</label>
              <input type="date" class="form-control" name="birthday" id="birthday" aria-describedby="emailHelp" placeholder="请输入正确的邮箱地址"th:value="${user.birthday}">
              </select>
            </div>
            <div class="form-group">
              <label for="createDate">注册时间</label>
              <input  type="text" disabled="disabled" class="form-control" id="createDate" name="seo_keywords" th:value="${user.createDate}" >
            </div>
            <div class="form-group">
              <label for="status">状态</label>
              <select  disabled="disabled"id="status" th:value="${user.status}">
                <option value="1">正常</option>
                <option value="2">冻结</option>
              </select>
            </div>
            <div class="form-group">
              <label for="remark">简介</label>
              <textarea class="form-control" name="remark" id="remark" rows="3"></textarea>
            </div>
            <button type="button" class="btn btn-primary" onclick="subfrom()">保存</button>
 
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="/lib/js/jquery.min.js"></script>
<script type="text/javascript" src="/lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/lib/js/main.min.js"></script>
<script th:inline="javascript">
  document.getElementById("remark").value=[[${user.remark}]]
</script>
<script th:inline="javascript">
  var imgsrc=""
  /*上传前图片展示*/
  $("#file1").change(function(){
    var type=this.files[0].name;
    var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
    var fileType = type.substr(type.length - 4, type.length);
    if (fileType == '.bmp' || fileType == '.jpg' || fileType == '.tif' ||
            fileType == '.gif' || fileType == '.png' || fileType == '.pcx'  ||
            fileType == '.tga'|| fileType == '.exif'|| fileType == '.fpx'   ||
            fileType == '.svg'|| fileType == '.psd'|| fileType == '.cdr'   ||
            fileType == '.pcd' ) {
      $("#imgs").attr("src", objUrl);
      imgsrc=objUrl
      console.log(objUrl)
    }else {
      alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")
    }
  }) ;
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL!=undefined) {
      url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
  }

  /*代码上传*/
  function subfrom() {
    if (imgsrc.length>0){
      $.ajax({
        url: '/file/upload',//上传地址
        type: 'POST',
        cache: false,
        data: new FormData($('#formimg')[0]),//表单数据
        processData: false,
        contentType: false,
        success: function (rtn) {
          if (rtn.status == 'error') {
            alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")　　//根据后端返回值,回显错误信息
          } else {
            /*上传成功*/
            imgsrc="https://"+rtn.name;
            console.log("https://"+rtn.name)
            subimg();
          }
        }
      });
    }else {
      imgsrc=[[${user.picture}]]
      subimg();
    }
  }

  function subimg() {
    if( imgsrc.length>0){
      $.ajax({
        url:"/user/update",
        type:'post',
        data:{
          nickname:$("#nickname").val(),
          sex:$("#sex").val(),
          email:$("#email").val(),
          phone:$("#phone").val(),
          address:$("#address").val(),
          birthday:$("#birthday").val(),
          remark:$("#remark").val(),
          picture:imgsrc
        },
        datatyp:'json',
        success:function (message) {
          if (message.code==0){
            //正确
            var r=confirm("更新成功!是否刷新页面数据？")
            if (r==true){
              window.parent.location.href='/index'
            }
          }else {
            alert("更新失败！")
          }
        }
      })
    }else {
      alert("更新失败！")
    }
  }
</script>
</body>
</html>